react的漫漫之路

头像
前端爱好者
    阅读 8 分钟
    学习React不是一蹴而就的事情，入门似乎也没那么简单。但我觉得这一切都是值得的。
    这是我在学习React中的一些心得，希望能够帮助到大家！
    React可以使用两种样式，一种是普通的css，一种是在React中定义的样式。
    普通的css样式，通过className=""来引用
    <!--普通css样式-->
    <style>
    .style_2{
        background-color: #6699ff;
        font-size: 24px;
        padding: 3px 5px 3px 5px;
        color: #FFFFFF;
    }
    .Separate{
        height: 10px;
    }
</style>
<span className="style_2">账号:</span>
React中定义的样式，通过style={}来引用
//React的css样式
    var style_1={
        color:'#9900ff',
        padding:3,
    }

    组件

    构建组件（名字随意起，首字母要大写），我这里构建了一个叫Board的组件，然后通过getInitialState进行初始化。通过ReactDOM.render加载到html页面中。如果ReactDOM.render中有多个组件或者标签，则需要用一个div标签来包裹。
    var Board = React.createClass({
        //初始数据
        getInitialState: function(){
            return ({
                comments: [{account:"123456",name:"落叶丶Fly"},{account:"111111",name:"啦啦啦"}]
            });
         
       },
//初始化
        eachComment: function(text,i){
            return (
                <Comment deleteFromBoard={this.removeComment} updateCommentText={this.updateComment} key={i} index={i}>
                    <br className="Separate"></br>
                    <span className="style_2">账号:</span>
                    <span className="style_2">{text.account}</span>
                    <br></br>
                    <span className="style_2">用户名:</span>
                    <span className="style_2">{text.name}</span>
                </Comment>
            );
        },
ReactDOM.render(
        //需要用一个div标签来包裹
        <div>
            <h1 style={style_1}>落叶丶Fly的React小站</h1>
            <Board />
        </div>,
        document.getElementById('container')
    );
props和state

    state：React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

    props：state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。

    函数

    React中的button点击事件和普通的JavaScript差不多，但是要注意onClick中的C要大写，否则会报错。本文通过按钮点击来更改editing的布尔值，用setState函数进行更新，从而在普通模式与编辑模式中切换。
    <button onClick={this.edit}>编辑</button>
        //编辑
        edit: function(){
            this.setState({editing: true});
        },
        //保存
        save: function(){
            var val = this.refs.new_account.value;
            var val1 = this.refs.new_name.value;
            console.log("拿到的值是: " + val+val1);
            this.props.updateCommentText(val,val1,this.props.index)
            this.setState({editing: false});
        },
        //普通模式
        renderNormal:function(){
            return (
                <div>
                    <div>{this.props.children}</div>
                    <button onClick={this.edit}>编辑</button>
                    <button onClick={this.remove}>移除</button>
                </div>
            );
        },
        //编辑模式
        renderForm:function(){
            let children = this.props.children
            return (
                <div>
                    <input ref="new_account" type="text" defaultValue = {children[2].props.children} />
                    <div></div>
                    <input ref="new_name" type="text" defaultValue = {children[5].props.children} />
                    <div></div>
                    <button onClick={this.save}>保存</button>
                </div>
            )
        },
        //模式更改
        render: function (){
            //console.log(this.props)
            if(this.state.editing){
                return this.renderForm();
            }else{
                return this.renderNormal();
            }
        }
全部代码
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>React-Template</title>
  <script type="text/javascript" src="js/react.min.js" ></script>
  <script type="text/javascript" src="js/react-dom.min.js" ></script>
  <script type="text/javascript" src="js/babel.min.js" ></script>
</head>
<!--普通css样式-->
<style>
    .style_2{
        background-color: #6699ff;
        font-size: 24px;
        padding: 3px 5px 3px 5px;
        color: #FFFFFF;
    }
    .Separate{
        height: 10px;
    }
</style>
<body>
    <!-- 容器 -->
    <div id="container"></div>
<script type="text/babel">
    //React的css样式
    var style_1={
        color:'#9900ff',
        padding:3,
    }
    
    var Board = React.createClass({
        //初始数据
        getInitialState: function(){
            return ({
                comments: [{account:"123456",name:"落叶丶Fly"},{account:"111111",name:"啦啦啦"}]
            });
        },
        //修改并更新数据
        updateComment: function(new_account,new_name,i){
            console.log(new_account+":"+new_name);
            var arr = this.state.comments;
            arr[i].account = new_account;
            arr[i].name = new_name;
            this.setState({comments: arr});
        },
        //删除数据
        removeComment: function(i){
            var arr = this.state.comments;
            arr.splice(i,1);
            this.setState({comments: arr});
        },
        //初始化
        eachComment: function(text,i){
            return (
                <Comment deleteFromBoard={this.removeComment} updateCommentText={this.updateComment} key={i} index={i}>
                    <br className="Separate"></br>
                    <span className="style_2">账号:</span>
                    <span className="style_2">{text.account}</span>
                    <br></br>
                    <span className="style_2">用户名:</span>
                    <span className="style_2">{text.name}</span>
                </Comment>
            );
        },
        //新增用户
        add: function(text){
            var arr = this.state.comments;
            arr.push(text);
            console.log('arr', this.state.comments)
            this.setState({comments: arr});
        },
        render: function(){
            return (
                <div>
                    <button onClick={this.add.bind(null,{account:"account",name:"name"})}>新增用户</button>
                    <div>
                    {
                        this.state.comments.map(this.eachComment)
                    }
                    </div>
                </div>
            );
        }
    });
 
 
    //编辑保存移除状态
    var Comment = React.createClass({
        getInitialState: function(){
            return ({editing: false});
        },
        //编辑
        edit: function(){
            this.setState({editing: true});
        },
        //移除
        remove: function(){
            // alert("removing comment!");
            this.props.deleteFromBoard(this.props.index);
        },
        //保存
        save: function(){
            var val = this.refs.new_account.value;
            var val1 = this.refs.new_name.value;
            console.log("拿到的值是: " + val+val1);
            this.props.updateCommentText(val,val1,this.props.index)
            this.setState({editing: false});
        },
 
 
        //普通模式
        renderNormal:function(){
            return (
                <div>
                    <div>{this.props.children}</div>
                    <button onClick={this.edit}>编辑</button>
                    <button onClick={this.remove}>移除</button>
                </div>
            );
        },
        //编辑模式
        renderForm:function(){
            let children = this.props.children
            return (
                <div>
                    <input ref="new_account" type="text" defaultValue = {children[2].props.children} />
                    <div></div>
                    <input ref="new_name" type="text" defaultValue = {children[5].props.children} />
                    <div></div>
                    <button onClick={this.save}>保存</button>
                </div>
            )
        },
        //模式更改
        render: function (){
            //console.log(this.props)
            if(this.state.editing){
                return this.renderForm();
            }else{
                return this.renderNormal();
            }
        }
    });
    
    ReactDOM.render(
        //需要用一个div标签来包裹
        <div>
            <h1 style={style_1}>落叶丶Fly的React小站</h1>
            <Board />
        </div>,
        document.getElementById('container')
    );
</script>
</body>
</htm>
    Microsoftlaravelnginxgithubmysql
    前端爱好者
    115 声望5 粉丝
    « 上一篇
    Docker部署Node.js的方法步骤
    下一篇 »
    node.js轻松搭建一个服务器

    引用和评论

    推荐阅读
    头像
    移动端优先的flex三栏布局的使用方法

    前端爱好者赞 2阅读 1.6k

    头像
    gitbook使用教程

    dragon赞 18阅读 41.7k评论 7

    头像
    在Java程序中监听mysql的binlog

    huan1993赞 13阅读 5.5k

    头像
    喜大普奔，适用于 VS Code 的 GitHub Copilot 全新免费版本正式推出，GitHub 全球开发者突破1.5亿

    鸣飞赞 8阅读 12.5k评论 1

    头像
    git 常用命令

    assassin_cike赞 4阅读 4.1k

    头像
    高效工程师的七个习惯

    Bytebase赞 3阅读 3.9k

    头像
    一个用JavaScript生成思维导图(mindmap)的github repo

    注销赞 1阅读 6.2k

    0 条评论
    得票最新